<template>
	<view class="content">
		<!-- 顶部高度隔离 -->
		<view class="top-height"></view>
		
			<!-- 搜索栏 -->
			<view class="search">
				<u-row gutter="0" class="flex-wrap">
					<u-col span="12">
						<!-- 搜索框 -->
						<view class="search-box">
							<u-search v-model="searchValue" 
							@search="search"
							shape="shape"
							 bg-color="#4E4A51"
							 color="#ffffff"
							 :placeholder="placehold"
							 placeholder-color="#EEEAF0"
							 search-icon-color="#ffffff"
							 maxlength="128"
							 :show-action="false">
							</u-search>
						</view>
					</u-col>
				</u-row>
			</view>
		
		<!-- 滚动组件 -->
		<scroll-view scroll-y style="height: calc(vh100);width: 100%; color: #FFFFFF;" @scrolltolower="onreachBottom">
			<!-- 工具栏 -->
			<view class="toolsbox">
				<u-row gutter="0" class="flex-wrap">
					
					<u-col span="3" v-for="(item,value) in toolList" :key="item.id">
						<!-- 内部每个item -->
						<view class="item" @click="toolsClick(item.id)">
							<!-- 内部图片 -->
							<image :src="item.img"></image>
							<!-- 内部文字 -->
							<view class="text">
								<text>{{item.text}}</text>
							</view>
						</view>
					</u-col>
					
				</u-row>
			</view>
			
			<!-- 滚动轮播 -->
			<view>
				<uu-scroll :list="hscroollist"></uu-scroll>
			</view>
			
			<!-- 通知文字 -->
			<view class="notify-text">
				<u-notice-bar mode="horizontal"
				:list="Tips_t"
				type="none" :volume-icon="true"
				color="#ffffff"></u-notice-bar>
			</view>
			<!-- 轮播图 -->
			<view>
				<u-swiper @click="show = true;" :list="list" mode="dot" 
				height="600" :autoplay="true"
				:circular="true"
				bg-color="#2D292D" :title="true"></u-swiper>
			</view>
			<!-- 点赞分享保存 -->
			<view class="zan-share-save">
				<view class="">
					<u-row gutter="0">
						<u-col span="3">
							<u-icon name="heart" color="#FFFFFF"
							size="40" hover-class="icon-push" :label="info.title"
							label-size="30" label-color="#FFFFFF"
							margin-left="20" @click="iconHeart"></u-icon>
						</u-col>
						<u-col span="3">
							<view style="color: #191519;">.</view>
						</u-col>
						<u-col span="3">
							<view style="color: #191519;">.</view>
						</u-col>
						<u-col span="3">
							<!-- 点赞 分享 -->
							<u-icon name="thumb-up" color="#FFFFFF"
							size="40" @click="iconZan"
							hover-class="icon-push"
							style="padding-right: 50rpx;"></u-icon>
							<!-- <u-icon name="thumb-up-fill" color="#FFFFFF"
							size="40"></u-icon> -->
							
							<u-icon name="zhuanfa" color="#FFFFFF"
							hover-class="icon-push"
							size="40" @click="iconShare"></u-icon>
						</u-col>
					</u-row>
				</view>
				<view class="descript-text">
					<text>{{info.content}}</text>
				</view>
			</view>
			<!-- 底部描述文字 -->
			<view class="descript-text2">
				<u-notice-bar mode="horizontal" 
				:list="Tips_b"
				type="none" :volume-icon="true"
				color="#ffffff"></u-notice-bar>
			</view>
			
			<u-popup v-model="show" mode="center" :zoom="true"
			:safe-area-inset-bottom="true" border-radius="10"
			:closeable="true" close-icon-color="#ff0000"
			width="100%" height="100%" close-icon-pos="bottom-right"
			:mask-custom-style="maskcustomstyle"
			>
						
						<view>出淤泥而不染，濯清涟而不妖</view>
			</u-popup>
		
		
		</scroll-view>
		
	</view>
	
</template>

<script>
	//组件导入
	import uCol from "@/uviewui/components/u-col/u-col.vue";
	import uRow from "@/uviewui/components/u-row/u-row.vue";
	import uSearch from "@/uviewui/components/u-search/u-search.vue";
	import uButton from "@/uviewui/components/u-button/u-button.vue"
	import uSwiper from "@/uviewui/components/u-swiper/u-swiper.vue"
	import uNoticeBar from "@/uviewui/components/u-notice-bar/u-notice-bar.vue"
	import uPopup from "@/uviewui/components/u-popup/u-popup.vue"
	
	import uuScroll from "@/components/hscroll.vue"
	
	export default {
		onResize(){
			
		},
		onReady() {
			// let _this = this;		
			// uni.getSystemInfo({
			// 	success:(res)=>{
					
			// 		if(res.screenHeight === 731){
						
			// 		}else if(res.screenHeight === 732){
						
			// 		}else if(res.screenHeight === 736){
						
			// 		}else if(res.screenHeight === 800){
			// 			console.log('注册800事件')
			// 			// 计算组件的高度
			// 			let view = uni.createSelectorQuery().select('.content');
			// 			view.boundingClientRect(data => {
			// 				console.log(data.height)
			// 			    data.height = "2250";
			// 				console.log('修改完成')
			// 				console.log(data.height)
			// 			    // console.log(_this.navHeight);
			// 			    // _this.scrollviewHigh = _this.phoneHeight - _this.navHeight;
			// 			}).exec();
						
						
			// 		}else if(res.screenHeight === 812){
						
			// 		}else if(res.screenHeight === 823){
						
			// 		}else if(res.screenHeight === 896){
						
			// 		}else if(res.screenHeight === 1024){
						
			// 		}else if(res.screenHeight === 1366){
						
			// 		}else{
						
			// 		}
			// 	},
			// })
			
			
			 
		},
		async onLoad() {
			
			//获取搜索栏的数据			
			await this.$u.api.getSearch("/1").then(res=>{
				// console.log('Search数据获取成功')
				if(res.success){
					this.$data.placehold = res.data.placehold;
					this.$data.searchValue = res.data.keyworld;
				}
			}).catch(err=>{
				console.log('Search数据获取失败')
				console.log(err)
			})
			
			//获取工具栏按钮数据
			await this.$u.api.getTools().then(res=>{
				// console.log('Tools数据获取成功')
				if(res.success){
					this.$data.toolList = this.$u.deepClone(res.data);
				}
			}).catch(err=>{
				console.log('Tools数据获取失败')
				console.log(err)
			})
			
			//获取水平轮播图数据
			await this.$u.api.getHSwiper('/0','/6').then(res=>{
				// console.log('HSwiper数据获取成功')
				if(res.success){
					this.$data.hscroollist = this.$u.deepClone(res.data);
				}
			}).catch(err=>{
				console.log('HSwiper数据获取失败')
				console.log(err)
			})
			
			//获取tips_t的数据
			await this.$u.api.getTips_t().then(res=>{
				// console.log('tips_t数据获取成功')
				// console.log('返回的数据:'+ res.data)
				if(res.success){
					res.data.forEach(item=>{
						this.$data.Tips_t.push(item.text)
					})
				}
			}).catch(err=>{
				console.log('tips_t数据获取失败')
				console.log(err)
			})
			
			//获取大轮播图数据
			await this.$u.api.getSwiper('/0','/3').then(res=>{
				// console.log('Swiper数据获取成功')
				if(res.success){
					this.$data.list = this.$u.deepClone(res.data)
				}
			}).catch(err=>{
				console.log('Swiper数据获取失败')
				console.log(err)
			})
			
			//获取大轮播图下面的信息
			await this.$u.api.getInfo().then(res=>{
				// console.log('Info数据获取成功')
				if(res.success){
					this.$data.info = this.$u.deepClone(res.data)
				}
			}).catch(err=>{
				console.log('Info数据获取失败')
				console.log(err)
			})
			
			
			//获取tips_t的数据
			await this.$u.api.getTips_b().then(res=>{
				// console.log('tips_b数据获取成功')
				// console.log('返回的数据:'+ res.data)
				if(res.success){
					res.data.forEach(item=>{
						this.$data.Tips_b.push(item.text)
					})
				}
			}).catch(err=>{
				console.log('tips_b数据获取失败')
				console.log(err)
			})

		},
		//组件注册
		components:{
			uCol,
			uRow,
			uSearch,
			uButton,
			uSwiper,
			uNoticeBar,
			uPopup,
			uuScroll
		},
		data() {
			return {
				maskcustomstyle:{background: 'rgba(0, 0, 0, 0.2)'},
				//弹出层显示变量
				show:false,
				//搜索框绑定变量
				searchValue:"",
				//search 的搜索框内容
				placehold:"",
				//轮播图数据
				list:[],
				// 顶部提示数据
				Tips_t: [],
				//底部提示数据
				Tips_b: [],
				//横向滚动swiper数据
				hscroollist:[],
				//工具栏数据
				toolList:[],
				//大轮播图底部数据信息
				info:{}
			}
		},
		methods: {
			//============================
			// 工具栏按钮事件
			toolsClick(index){
				console.log('工具栏按钮事件:'+index)
			},
			//============================
			//点赞 分享 保存
			//心图标事件
			iconHeart(){
				
			},
			//赞图标事件
			iconZan(){
				
			},
			//分享图标事件
			iconShare(){
				
			},
			//============================
			//下滚动事件
			onreachBottom(e){
				console.log(e)
			},
			//顶部搜索事件
			search(){
				console.log('搜索')
			}
		}
	}
</script>

<style lang="scss">
	//整体背景色
	.content{
		background-color: #000000;
		
		
		.search{
			width: 100%;
			background-color: #000000;
		}
	}
	//===================================
	//顶部高度隔离
	/* #ifdef APP-PLUS */
		.top-height{
			height: 60rpx;
		}
	/* #endif */
	/* #ifdef MP-WEIXIN */
		.top-height{
			height: 140rpx;
		}
	/* #endif */
	/* #ifdef H5 */
	.top-height{
		height: 80rpx;
	}
	/* #endif */
	//===================================
	// 搜索框
	.search-box{
		padding: 15rpx;
	}
	//===================================
	// 工具条
	.toolsbox{
		background-color: #2D292D;
	}
	//每个图标框
	.toolsbox .item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 15rpx auto;
	}
	//每个图标框按下
	.toolsbox .item:active{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 15rpx auto;
		background-color: #343434;
		border-radius: 25rpx;
	}
	//内部文本
	.toolsbox .text{
		color: #FFFFFF;
		text-align: center;
	}
	//内部图片
	.toolsbox image{
		width: 80rpx;
		height: 80rpx;
	}
	//===============================
	//通知文字
	.notify-text{
		background-color: #191519;
		height: 90rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	//===============================
	//点赞 分享 保存
	.zan-share-save{
		background-color: #191519;
		padding-left: 25rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.icon-push{
		color: #FFFFFF;
	}
	.descript-text{
		padding-left: 25rpx;
		padding-top: 25rpx;
		color: #FFFFFF;
	}
	//============================
	// 底部描述文字
	.descript-text2{
		margin-top: 25rpx;
		color: #FFFFFF;
		background-color: #191519;
		// padding-left: 50rpx;
		// padding-top: 25rpx;
	}
</style>
